<template>
  <van-cell center title="匹配模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24"/>
    </template>
  </van-cell>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length< 1" description="数据为空"/>

</template>
<script setup lang="ts">
import { ref, watchEffect} from "vue";
import UserCardList from "../components/UserCardList.vue";
import myAxios from "../plugins/myAxios";
import {showFailToast} from "vant";
import {UserType} from "../models/user";


const isMatchMode = ref<boolean>(false);
const userList = ref([]);
const loading = ref(true);
/**
 * 加载数据
 */
const loadData = async () => {
  let userListData;
  loading.value = true;
  if(isMatchMode.value){
    let num = 10;
    userListData = await myAxios.get('/user/match', {
      params: {
        num
      },
    })
        .then(function (response: any) {
          console.log('/user/match', response);
          return response?.data;
        })
        .catch(function (error: any) {
          console.log('/user/match', error);
          showFailToast('请求失败')
        })
  }else{
    userListData = await myAxios.get('/user/recommend', {
      // withCredentials:false,
      params: {
        pageSize: 8,
        pageNum: 1,
      },
    })
        .then(function (response: any) {
          console.log('/user/recommend', response);
          return response?.data?.records;
        })
        .catch(function (error: any) {
          console.log('/user/recommend', error);
          showFailToast('请求失败')
        })
  }

  if (userListData) {
    userListData.forEach((user: UserType)=> {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
    loading.value = false;
  }

}
watchEffect(() => {
  loadData();
})


</script>

<style scoped>

</style>